<template>
  <BasicTable @register="registerTable">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'parentId'">
        {{ record.parentId === '0' ? '一级菜单' : '子级菜单' }}
      </template>
      <template v-if="column.dataIndex === 'icon'">
        <Icon :icon="record.icon" />
      </template>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '编辑',
            icon: 'ant-design:edit-outlined',
            onClick: handleEdit.bind(null, record),
          },
        ]"
      />
    </template>
  </BasicTable>
  <MenuDrawer @register="registerDrawer" @success="reload" />
</template>

<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getMenuListByParam } from '/@/api/sys/menu';
  import { searchFormSchema, menuColumns } from './menu.data';
  import MenuDrawer from './components/MenuDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';

  const [registerTable, { reload, updateTableDataRecord }] = useTable({
    title: '菜单列表',
    api: getMenuListByParam,
    rowKey: 'id',
    columns: menuColumns,
    showIndexColumn: false,
    pagination: false,
    tableSetting: {
      cacheKey: 'menu_list',
    },
    formConfig: {
      labelWidth: 100,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    beforeFetch({ name }) {
      return {
        name: name ?? '',
      };
    },
    actionColumn: {
      width: 300,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerDrawer, { openDrawer }] = useDrawer();

  const handleEdit = (record: Recordable) => {
    openDrawer(true, {
      record,
    });
  };
</script>
<style scoped></style>
